<template>
  <div>
    <div class="last">
      <div class="lastTop">
        <h2>知名客户</h2>
        <p>虽然都不是500强，但我可以给您讲我们与任何一个伙伴的故事</p>
        <div class="lastTopImg">
          <img
            src="@/assets/partner/pars1.png"
            style="margin-left: 20px"
            alt=""
          />
          <img src="@/assets/partner/pars2.png" alt="" />
        </div>
      </div>
      <div class="lastCenter">
        <div class="lastCenterContent">
          <div class="lastText">
            <h4>现在，非常期待与您的又一次邂逅</h4>
            <p>我们会努力让每一次邂逅都打爆您的头</p>
          </div>
          <span>立即邂逅</span>
        </div>
      </div>
      <div class="lastBottom">
        <div class="lastBottomContent">
          <div class="lastBottomTitle">
            <h4>我们的网络服务流程</h4>
            <p>
              丰富互联网信息化项目服务经验，让我们对项目实施的规范化、标准化有更多的理解
            </p>
          </div>
          <div class="lastBottomList">
            <ul>
              <li v-for="item of lastBottomList" :key="item.index">
                <img :src="item.lastBottomImg" alt="" />
                <span>{{ item.lastBottomText }}</span>
              </li>
            </ul>
            <p>注：以上只是简洁的流程，实际项目中流程会有更多细节，请悉知</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentList: [
        {
          f: 1,
          leftImg: require("@/assets/c1.png"),
          textH: "核心精神",
          p1:
            "共创 共赢 共知 共享 与广大企业无私共享，坚定共创事业，真心诚意地为企业服务，实现共赢",
          p2: "国内领先的P2P平台，行业第一",
        },
        {
          f: 2,
          leftImg: require("@/assets/c2.jpg"),
          textH: "服务理念",
          p1:
            "当合作项目顺利完成后，对合作企业有三种选择方式：该项目的技术研发人员可由公司全部带走。",
          p2: "农业部农村信息入户工程指定",
        },
        {
          f: 3,
          leftImg: require("@/assets/c3.png"),
          textH: "共创模式",
          p1:
            "共创 共赢 共知 共享 与广大企业无私共享，坚定共创事业，真心诚意地为企业服务，实现共赢",
          p2: "国内最顶级军事院校之一",
        },
        {
          f: 4,
          leftImg: require("@/assets/c4.jpg"),
          textH: "核心精神",
          p1:
            "共创 共赢 共知 共享 与广大企业无私共享，坚定共创事业，真心诚意地为企业服务，实现共赢",
          p2: "湖南最具影响力的媒体之一",
        },
      ],
      lastBottomList: [
        {
          lastBottomImg: require("@/assets/flow/p1.png"),
          lastBottomText: "沟通需求",
        },
        {
          lastBottomImg: require("@/assets/flow/p2.png"),
          lastBottomText: "签订合同",
        },
        {
          lastBottomImg: require("@/assets/flow/p3.png"),
          lastBottomText: "UE原型设计",
        },
        {
          lastBottomImg: require("@/assets/flow/p4.png"),
          lastBottomText: "需求确认",
        },
        {
          lastBottomImg: require("@/assets/flow/p5.png"),
          lastBottomText: "UI设计",
        },
        {
          lastBottomImg: require("@/assets/flow/p6.png"),
          lastBottomText: "开发编码",
        },
        {
          lastBottomImg: require("@/assets/flow/p7.png"),
          lastBottomText: "测试验收",
        },
        {
          lastBottomImg: require("@/assets/flow/p8.png"),
          lastBottomText: "交付培训售后",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss">
// 每部分顶部文字
@mixin h3 {
  font: {
    weight: 400;
    size: 30px;
  }
  text-align: center;
  margin-bottom: 20px;
  min-width: 1100px;
}
@mixin p {
  text-align: center;
  margin: 0;
  min-width: 1100px;
  font-size: 13px;
}
// last 部分
.last {
  width: 100%;
  height: 100%;
  min-width: 1300px;
  .lastTop {
    height: 500px;
    width: 100%;
    box-sizing: border-box;
    background: #f8f8f8;
    padding: 100px 400px;
    h2 {
      @include h3;
      margin-bottom: 15px;
      min-width: auto;
    }
    p {
      @include p;
      font: {
        weight: 400;
        size: 15px;
      }
      min-width: auto;
      color: #aaa;
    }
    .lastTopImg {
      width: 80%;
      overflow: auto;
      margin: 0 auto;
      // margin-left: 20px;
      margin-top: 70px;
      display: flex;
      justify-content: space-between;
      img {
        display: block;
        width: 210px;
        height: 70px;
        -webkit-filter: grayscale(100%);
        transition: 0.3s ease-in-out;
        &:hover {
          -webkit-filter: grayscale(0%);
        }
      }
    }
  }
  .lastCenter {
    background: url(../../assets/bg.gif);
    background-size: 100% 100%;
    background-attachment: fixed;
    position: relative;
    height: 340px;
    width: 100%;
    box-sizing: border-box;
    padding: 150px 0 120px 0;
    .lastCenterContent {
      width: 70%;
      margin: 0 auto;
      .lastText {
        h4 {
          margin: 0;
          color: #fff;
          font: {
            weight: 500;
            size: 30px;
          }
          margin-bottom: 15px;
        }
        p {
          font: {
            weight: 400;
            size: 20px;
          }
          color: #fff;
          margin: 0;
        }
      }
      span {
        display: block;
        width: 150px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border: 1px solid #fff;
        border-radius: 5px;
        background: transparent;
        color: #fff;
        position: relative;
        z-index: 22;
        cursor: pointer;
        float: right;
        top: -65px;
        &::before,
        &::after {
          content: "";
          width: 0;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 5px;
          background: #fff;
          transition: 0.5s ease-in-out;
          z-index: -2;
        }
        &:hover {
          z-index: 1;
          background: transparent;
          color: #666;
        }
        &:hover::after,
        &:hover::before {
          width: 100%;
        }
      }
    }
  }
  .lastBottom {
    height: 550px;
    width: 100%;
    box-sizing: border-box;
    padding: 70px 150px;
    .lastBottomContent {
      width: 100%;
      height: 100%;
      .lastBottomTitle {
        h4 {
          @include h3;
          margin-bottom: 15px;
        }
        p {
          @include p;
          font-size: 17px;
          color: #aaa;
          font-weight: 400;
        }
      }
      .lastBottomList {
        ul {
          overflow: auto;
          display: flex;
          justify-content: space-between;
          margin: 80px 0 0 0;
          min-width: 1250px;
          li:first-child {
            border-left: 1px solid #ccc;
          }
          li {
            list-style: none;
            display: flex;
            flex-direction: column;
            width: 200px;
            border-right: 1px ridge #ccc;
            box-sizing: border-box;
            padding: 0 5px;
            cursor: pointer;
            img {
              height: 50px;
              width: 50px;
              margin: 0 auto;
            }
            span {
              font: {
                weight: 400;
                size: 12px;
              }
              color: #aaa;
              text-align: center;
              margin-top: 15px;
            }
          }
        }
        p {
          padding-left: 100px;
          font-size: 14px;
          color: #aaa;
          margin-top: 25px;
        }
      }
    }
  }
}
</style>